<template>
<section>
    <div style="margin:20px 0px">

        <div class="wxchatBorderRightMid">
            <div style="margin-left: 30px;margin-top: 15px;" v-for="(item,index) in messageList" :key="index">
                <div align="center" style="padding: 15px 0;">
                </div>
                <el-row v-if="!item.isMine">
                    <el-col :span="2">
                        <!-- <el-avatar shape="square" style="width: 35px;height: 35px;"></el-avatar> -->
                    </el-col>
                    <el-col :span="12">
                        <div class="chatPop1"><span style="line-height: 23px;">{{item.message}}</span></div>
                    </el-col>
                </el-row>
                <el-row v-if="item.isMine">
                    <el-col :span="21">
                        <div class="chatPop2">
                            <span style="line-height: 23px;">{{item.message}}</span>
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <!-- <el-avatar shape="square" style="width: 35px;height: 35px;"></el-avatar> -->
                    </el-col>
                </el-row>
            </div>

        </div>
        <el-input type="textarea" rows="5" v-model="sendText" style="margin:10px 1px;"></el-input>
        <el-button type="success" @click="websocketsend()" style="width:100%;height:50px margin:10px">发送</el-button>
    </div>
</section>
</template>

<script>
import axios from 'axios';
import * as api from "@/api/api.js";

export default {
    data() {
        return {
            websocket: null,
            //通过这个参数隔离不同桌的游戏，可以写成活的
            pageCode: 1,
            sendText: "",
            messageList: [
                // { message: "1231231", isMine: true },
                // { message: "aaaaaa", isMine: false },
            ]
        };
    },
    methods: {
        //初始化weosocket
        initWebSocket() {
            //websocket服务器地址
            this.websocket = new WebSocket("ws://localhost:9527/hospital/websocket/" + this.pageCode); //后端本地地址
            this.websocket.onopen = this.websocketonopen;
            this.websocket.onerror = this.websocketonerror;
            this.websocket.onmessage = this.websocketonmessage;
            this.websocket.onclose = this.websocketclose;
        },
        websocketonopen() {
            console.log("WebSocket连接成功");
        },
        websocketonerror(e) {
            console.log("WebSocket连接发生错误");
        },
        websocketclose(e) {
            console.log("WebSocket连接已关闭");
        },
        //数据接收
        websocketonmessage(e) {
            // const redata = JSON.parse(e.data);
            console.log(e.data);
            this.messageList.push({ message: e.data, isMine: false });
        },
        //数据发送
        websocketsend() {
            this.sendText = this.sendText.replaceAll(new RegExp('(' + api.keywords + ')', "g"), "**");
            this.websocket.send(this.pageCode + "," + this.sendText); //真正把我说的话发出去
            this.messageList.push({ message: this.sendText, isMine: true }); //把我说的话显示在屏幕上
            this.sendText = ""; //清空输入框
        },
        //测试调用后台方法
        queryUser() {
            let para = {};
            axios.post(`http://localhost:18888/base/user/queryUser`, para).then(
                res => {
                    //alert("success");
                }).catch(() => {});
        },
    },
    mounted() {
        this.initWebSocket();
        // this.queryUser();
    },
    destroyed: function () {
        this.websocketclose();
    }
}
</script>

<style>
.el-dialog__header {
    padding: 20px 20px 10px;
}

.chatPop1 :hover {
    background-color: #FAFAFA;
}

.chatPop1 span {
    background-color: #fff;
    padding: 5px 8px;
    display: inline-block;
    border-radius: 10px;
    margin: 0px 0 10px 10px;
    position: relative;
    border: 1px solid #E3E3E3;
    max-width: 290px;
}

.chatPop1 span::after {
    content: '';
    border: 8px solid #ffffff00;
    border-right: 8px solid #fff;
    position: absolute;
    top: 8px;
    left: -16px;
}

.chatPop2 :hover {
    background-color: #2683f5;
}

.chatPop2 span {
    background-color: #2683f5;
    padding: 5px 8px;
    display: inline-block;
    border-radius: 10px;
    margin: 0px 15px 10px 10px;
    position: relative;
    border: 1px solid #E3E3E3;
    max-width: 290px;
    float: right;
    color: #fff;
}

.chatPop2 span::after {
    content: '';
    border: 8px solid #ffffff00;
    border-right: 8px solid #2683f5;
    position: absolute;
    top: 8px;
    right: -16px;
    transform: rotateY(180deg)
}

.custom {
    border: 0px solid blue;
    height: 670px;
    width: 795px;
}

.wxchatBorder {
    width: 795px;
    height: 670px;
    border: 1px solid red;
    margin-left: -20px;
    margin-top: -59.5px;

}

.wxchatBorderLeft {
    width: 250px;
    height: 670px;
    background-color: #eeebe9;
    display: inline-block;
    float: left;
    margin-left: -20px;
    margin-top: -60px;
}

.wxchatPeople {
    color: #000000;
    font-size: 14px;
}

.wxchatNews {
    color: #999;
    padding-top: 5px;
    font-size: 12px;
}

.wxchatName {
    color: #000000;
    font-size: 20px;
    float: left;
    padding-left: 30px;
    padding-top: 20px;
}

.wxchatMore {
    color: #999;
    font-size: 20px;
    margin-right: -15px;
    padding-top: 25px;
}

.wxchatBorderRight {
    max-width: 245px;
    height: 670px;
    display: inline-block;
    margin-right: -22px;
    margin-top: -60px;
}

.wxchatBorderRightTop {
    width: 545px;
    height: 60px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #e7e7e7;
    display: block;
    margin-right: -20px;
    margin-top: -30px;
}

.wxchatBorderRightMid {
    width: 100%;
    height: 10rem;
    background-color: #f5f5f5;
    border: 2px solid deeppink;
    display: block;
    margin-right: -20px;
}

.wxchatBorderRightBottom {
    width: 545px;
    height: 152px;
    background-color: #fff;
    border: 1px solid #eee;
    display: block;
    margin-right: -20px;
}

.wxchatIcon1 {
    display: inline-block;
    padding: 8px 10px 10px 30px;
    width: 40px;
    height: 40px;
    font-size: 20px;
}

.wxchatIcon2 {
    display: inline-block;
    padding: 8px 10px 10px 20px;
    width: 40px;
    height: 40px;
    font-size: 20px;
}

.wxchatIcon3 {
    display: inline-block;
    padding: 8px 10px 10px 10px;
    width: 40px;
    height: 40px;
    font-size: 20px;
}

.wxchatIcon4 {
    display: inline-block;
    padding: 8px 10px 10px 0px;
    width: 40px;
    height: 40px;
    font-size: 20px;
}

.sendButton {
    margin-top: 5px;
    margin-right: 28px;
}
</style>
